<template>
    <div>
        <van-search
                v-model="inputValue"
                show-action
                placeholder="请输入姓名或手机号搜索"
                @input="inputSearch"
                clearable
        />
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
                    offset="100"
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
            >
                <van-cell></van-cell>
                <van-cell v-for="item of listUser" :key="item.id" :title="item.username" :value="item.phoneNumber" is-link @click="getButtonList(item)"  />
            </van-list>
        </van-pull-refresh>
        <van-popup v-model="show"  closeable
                   close-icon="close" position="bottom" :style="{height:'50%'}" >
            <van-row gutter="20">
                <van-col span="4"><van-button size="small" type="primary" @click="checkAll">全选</van-button></van-col>
                <van-col span="4"><van-button size="small" type="default" @click="toggleAll">反选</van-button></van-col>
                <van-col span="6"></van-col>
                <van-col span="8"><van-button size="small"  type="info" @click="updateAuthButton">修改</van-button></van-col>
            </van-row>

            <van-checkbox-group v-model="result" ref="checkboxGroup">

            <van-cell-group>
                <van-cell
                        v-for="(item, index) in buttons"
                        clickable
                        :key="index"
                        :title="item"
                        @click="toggle(index)"
                >
                    <template #right-icon>
                        <van-checkbox :name="item" ref="checkboxes" />
                    </template>
                </van-cell>
            </van-cell-group>
        </van-checkbox-group></van-popup>
    </div>
</template>

<script>
    import {getComm, postComm} from "../api/manage";
    import {Notify} from "vant";

    export default {
        name: "ButtonAuth",
        data(){
            return{
                refreshing:false,
                loading:false,
                finished:false,
                listUser:[],
                current:0,
                inputValue:'',
                show: false,
                list: ['a', 'b'],
                result: [],
                buttons:[],
                selectOpenid:''
            }
        },
        methods:{

            onRefresh(){
                this.finished = false;

                // 重新加载数据
                // 将 loading 设置为 true，表示处于加载状态
                this.loading = true;
                this.onLoad();
            },
            onLoad(){
                this.current=this.current+1;
                this.getUserList();

            },
            getUserList(){
                const param ={
                    param:this.inputValue,
                    current:this.current,
                    size:10
                }
                getComm('/auth/getUserList',param).then(res =>{
                    if (res.code===200){
                        console.log(res.result.records)

                        this.listUser= this.listUser.concat(res.result.records);
                        console.log(res.result.records.size)
                        if(res.result.records<10){
                            this.finished=true;
                        }else{
                            console.log(this.listUser)

                            this.finished=false;
                        }
                        this.refreshing = false;
                        this.loading = false;



                    }
                })
            },
            inputSearch(){
                this.listUser=[];
                this.current=0;
                this.onLoad();
            },
            onCancel(){
                this.inputValue=''
            },
            getButtonList(data){
                console.log(data)
                this.show=true;
                getComm('/auth/getWxButtons').then(res =>{
                    if(res.code===200){
                       this.buttons= res.result;
                    }
                })
                 this.result =data.authorization.split('|');
                this.selectOpenid=data.openid;
                console.log(this.buttons)
            },
            toggle(index) {
                this.$refs.checkboxes[index].toggle();
            },
            checkAll() {
                this.$refs.checkboxGroup.toggleAll(true);
            },
            toggleAll() {
                this.$refs.checkboxGroup.toggleAll();
            },
            updateAuthButton(){
                let string ='';
                this.result.forEach(res =>{
                    string=string+res+'|'
                })
                const param ={
                    openid:this.selectOpenid,
                    authorization:string
                }
                postComm('/auth/updateAuthorization',param).then(res =>{
                    if (res.code===200){
                        Notify({message: '修改成功', type: 'success', duration: 2000})
                    }
                })
            }

        }
    }
</script>

<style scoped>

</style>